<!DOCTYPE html> 
<html> 
	<head> 
		<title>InMobile v2 - Better Mobile &amp; Tablet Template</title>
        
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;"  />
		<meta name="apple-mobile-web-app-capable" content="yes" />
        
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <link rel="stylesheet" href="__PUBLIC__/styles/style.css" />
        <link rel="stylesheet" href="__PUBLIC__/styles/photoswipe.css" />
        <link rel='stylesheet' href='http://fonts.useso.com/css?family=Lobster'>

        <link rel="stylesheet" href="__PUBLIC__/themes/dark_blue.css" />
        
		<script type="text/javascript" src="__PUBLIC__/scripts/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/scripts/klass.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/scripts/code.photoswipe.jquery-3.0.4.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/scripts/in-mobile.js"></script>
        
        <script type="text/javascript">
		
		/*
		 * IMPORTANT!!!
		 * REMEMBER TO ADD  rel="external"  to your anchor tags. 
		 * If you don't this will mess with how jQuery Mobile works
		 */
		
		(function(window, $, PhotoSwipe){
			
			$(document).ready(function(){
				
				$('div.gallery-page')
					.live('pageshow', function(e){
						
						var 
							currentPage = $(e.target),
							options = {},
							photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
							
						return true;
						
					})
					
					.live('pagehide', function(e){
						
						var 
							currentPage = $(e.target),
							photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

						if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
							PhotoSwipe.detatch(photoSwipeInstance);
						}
						
						return true;
						
					});
				
			});
		
		}(window, window.jQuery, window.Code.PhotoSwipe));
		
	</script>
<style type="text/css">
    
/* 
    img{
     max-height: 100px;
     width:50px;
    }
    .fa {
  float: left;
  width: 100%;
  padding-top: 13px;
} */
</style>

	</head>
    <body>
    <div data-role="page" id="Home" data-theme="a">
    
        <div data-role="header" style="margin-bottom: 30px" data-theme="c">
          
              <div data-role="navbar" data-theme="a" data-position="fixed">
                    <ul>
                        <li><a href="http://houge.mcooz.com/kros/index/zndex" data-icon="arrow-l" data-theme="a" rel="external">Back</a></li>
                    </ul>
              </div>
            
          </div><!-- Header -->
        
        
        <div data-role="content">	
        	<div class="ui-body ui-body-a">
            
                
                <ul id="kros_ul" data-role="listview" data-inset="true">


<script type="text/javascript">
$(function(){
       // $('.fa').html('').append('<p class="load_tips text-center"><img width=22 height=22 src="http://www.renwuyi.com//img/sys_loading.gif" alt="loading"> 吼歌正在玩命加载中……</p>');
        $('#kros_ul').listview('refresh');
   // $('.fa').on('click', function(){
        var url ="http://houge.mcooz.com/kros/index/ajax_getvideo";
        $.getJSON(url,function(data){ 
        for(var o in data.data){
     // alert(o);
     // alert(data.data[o]);
    // http://houge.mcooz.com/kros/Public//Uploads/
      // var html=" <li class='fa'><a >First Gallery</a></li> ";
     // $("#kros_ul").html(html); '>
    // $('.load_tips').remove();
      $("#kros_ul").append("<li class='fa'><img src='http://houge.mcooz.com/kros/Public/Uploads/"+data.data[o].image+"'><h3><a href='#" +data.data[o].id+"'>"+data.data[o].geming+"</a></h3><p>"+data.data[o].jieshao+"</p></li>");


$("#Home").after(' <div data-role="page" id="'+data.data[o].id+'" class="gallery-page" data-url="'+data.data[o].id+'">123</div>').trigger( "create" );





 //$('body').page('refresh');

       $('#kros_ul').listview('refresh');
   // alert("text:"+data.data[o].geming);
   }   
     
    });
        });
</script>
                    <li class="fa"><img src="http://houge.mcooz.com/kros/Public/Uploads/20141019/%E7%9A%84%E9%A3%8E%E6%99%AFsdk%E8%AD%A6%E6%96%B9%E5%B0%86%E6%B7%B1%E5%88%BB%E7%9A%84%E6%88%BF%E9%97%B4323.JPG" />
        <h3><a href="#Gallery2">Reviewer A</a></h3>
        <p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p></li> 
                    <li><a href="#Gallery3">Second Gallery</a></li> 
                </ul> 
                
                
                
            </div>
        </div><!-- Content -->
    
        <div data-role="footer" data-theme="c">
            <div data-role="navbar" data-grid="c" data-theme="a" data-position="fixed">
                <ul>
                    <li><a href="http://g.co/maps/55r27" data-icon="search" data-theme="a">Map</a></li>
                    <li><a href="mailto:youremail@company.org" data-icon="info" data-theme="a">Mail</a></li>
                    <li><a href="gallery.html" data-icon="star" data-theme="a" rel="external">Portfolio</a></li>
                    <li><a href="#" data-icon="arrow-u" data-theme="a" class="returnTopAction">Return Top</a></li>
                </ul>
			</div>
        </div><!-- Footer -->
    
    </div><!-- Page -->


   <div data-role="page" id="Gallery2" class="gallery-page">123</div>

   

    </body>
</html>
